<template>
  <div class="goods-box">
    <div class="search2">
      <el-input
        v-model="searchValue"
        maxlength="100"
        clearable
        style="width: 290px"
      />
      <img
        src="../assets/img/search.png"
        @click="handleSearch"
        class="search-icon"
      />
      <i style="color: #696969; font-size: 13px; font-style: normal">
        &nbsp;热门搜索：
        <a
          class="tag-item"
          v-for="topic in popularTopics"
          :key="topic"
          @click="handleTopicDetail(topic)"
        >
          {{ topic }}
        </a>
      </i>
    </div>
    <div
      class="goods"
      v-for="(item, index) in goods"
      :key="item.orderId"
      @click="detailsClick(item.orderId)"
      :style="(index + 1) % 5 === 0 ? 'margin-right:0' : 'margin-right:25px;'"
    >
      <img
        class="goods-img"
        :src="getImageSrc(item.picture || 'wutu.gif')"
        alt=""
      />
      <div class="info">
        <span class="initiator">[{{ item.ownName }}]</span>
        <p class="content">{{ item.content }}</p>
        <span class="price" v-if="item.price">￥{{ item.price }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useGoodsStore } from "@/stores/goods";

const goodsStore = useGoodsStore();
const searchValue = ref("");
const goods = ref([]);
const popularTopics = [
  "苹果",
  "哈密瓜",
  "樱桃",
  "西红柿",
  "蜜柚",
  "玉米",
  "赣南脐橙",
];

// 刷新goods
watch(
  () => goodsStore.goods,
  (newValue) => {
    goods.value = newValue;
  }
);

const getImageSrc = (picture) => {
  return new URL(`../assets/file/order/${picture}`, import.meta.url).href;
};

// const imgShowRoad = orderStore.imgShowRoad;
// const orderId = orderStore.orderId;

import { useRouter } from "vue-router";
const router = useRouter();

const detailsClick = (orderId) => {
  router.push(`/home/details?orderId=${orderId}`).catch((err) => err);
};

const handleSearch = async () => {
  const params = {
    content: searchValue.value,
    pageNum: 1,
  };
  await goodsStore.fetchGoods(params);
};

const handleTopicDetail = (val) => {
  searchValue.value = val;
  handleSearch();
};
</script>

<style lang="less" scoped>
.search2 {
  height: 40px;
  background-color: white;
  padding: 10px 20px;
  margin-top: 10px;
  display: flex;

  .tag-item {
    margin-right: 10px;
    cursor: pointer;
  }

  .search-icon {
    cursor: pointer;
  }

  i {
    margin-left: 8px;
    color: #696969;
    display: flex;
    align-items: center;
  }
}

.goods-box {
  background-color: #f9f9f9;
  width: 1300px;
  margin: 0 auto;

  .goods {
    float: left;
    width: 200px;
    height: 290px;
    margin-top: 15px;
    padding: 15px;
    background-color: white;
    border: 1px solid #d3d3d3;
    cursor: pointer;

    .goods-img {
      float: left;
      width: 160px;
      height: 170px;
      margin-right: 10px;
      border-radius: 6px;
    }

    .info {
      width: 160px;
      float: left;

      .initiator {
        color: #666;
      }

      .content {
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
        font-size: 10px;
      }

      .price {
        font-size: 10px;
        font-weight: bold;
        display: block;
        color: red;
      }
    }
  }
}

.search2 /deep/ .el-input--suffix .el-input__inner {
  height: 35px;
  line-height: 35px;
}
</style>
